import React, { useState } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { SearchBar, List, InfiniteScroll, DotLoading, Image, Button } from 'antd-mobile'
import request from '../../utils/request'
const App = () => {
	const navagate = useNavigate()
	const [pageSize, setPageSize] = useState(10)
	const [pageCode, setPageCode] = useState(1)
	const [list, setList] = useState<any[]>([])
	const [hasMore, setHasMore] = useState(true)

	const loadMore = async () => {

		try {
			const resp = await request({
				url: '/api/list',
				params: {
					pageSize,
					pageCode
				}
			})
			const { data, code, hasMore } = resp.data
			setList([...list, ...data])
			setHasMore(hasMore)
			setPageCode(pageCode + 1)

		} catch (error) {
			console.log('发生了错误!!');
		}

	}

	const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
		return (
			<>
				{hasMore ? (
					<>
						<span>Loading</span>
						<DotLoading />
					</>
				) : (
					<span>--- 我是有底线的 ---</span>
				)}
			</>
		)
	}

	return (
		<div>
			<header>
				<SearchBar

					placeholder='请输入内容'
					style={{ flex: 1 }}
					onFocus={() => navagate('/search')}
				/>
				<Button color='primary' size='small' onClick={ () => navagate('/tag')}>标签</Button>
				<Button color='primary' size='small' onClick={ () => navagate('/sign')}>签到</Button>
			</header>
			<main>
				<List>
					{
						list.length > 0 && list.map((v) => {
							return <List.Item key={v.id}
								prefix={
									<Image
										src={v.url}
										width={40}
										height={40}
										lazy
									/>
								}
							>
								{v.title}
							</List.Item>
						})
					}
				</List>
				<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
					<InfiniteScrollContent hasMore={hasMore} />
				</InfiniteScroll>
			</main>
			<footer></footer>
		</div>
	)
}


export default App